<template>
<div class="users">
        <div class="header-panel">
            <div class="control">
                <div class="operations">
                        <div @click='$service("user#add").then(_ => get())'><el-button icon="plus" type="primary">新增用户</el-button></div>
                </div>
                <div class="hero-title" >
                        管理员列表
                </div>
                
            </div>
        </div>
        <div class="container">
            <el-table :data='data.filtered'
                border
			    tooltip-effect="dark"
                v-loading='table_loading'
                element-loading-text="拼命加载中">
                <el-table-column label='id'  prop='uid' width='112'></el-table-column>
                <el-table-column label='用户名称' prop='username' width='220'></el-table-column>
                <el-table-column label='用户组' prop='userGroup' width='220'></el-table-column>
                <el-table-column label='email' prop='email' ></el-table-column>
                <el-table-column label='添加人' prop='add_user' width='110'></el-table-column>
                <el-table-column label='添加时间' width='110'><template scope='scope'>
                        {{scope.row.add_time | formatTime}}
                    </template></el-table-column>
                <el-table-column label='操作' width="200">
                    <template scope="scope">
                    <div   class='table-op'>
                        <div v-if=" scope.row.is_del == 0 ">
                            <el-button size="small" @click='$service("user#edit", scope.row.uid).then(_ => get())'>编辑</el-button>
                            <el-button size="small" type="danger" @click='$service("user#delete", scope.row.uid).then(_ => get())'>删除</el-button>
                        </div>
                        <div v-if=" scope.row.is_del == 1 ">
                            <el-button size="small" type="success" @click='$service("user#resume", scope.row.uid).then(_ => get())'>恢复</el-button>
                        </div>
                        <div v-if=" scope.row.is_del == null ">
                             <el-button size="small" @click='$service("user#edit", scope.row.uid).then(_ => get())'>编辑</el-button>
                        </div>
                    </div> 
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
            small
            layout="prev, pager, next, jumper, slot"
            :page-size="1"
            @current-change="handleCurrentChange"
            :total="data.pageCount"
            class='with-button'
            >
             <el-button class='el-pagination__append'>跳转</el-button>
            </el-pagination>
        </div> 
</div>
</template> 
<script>
    export default {
        data(){ 
            return {
                data: {
                    goodsList: [],
                    filtered: [],
                },
                admin: "",
                page: 1,
                table_loading: false
            }
        }
        , computed: {
            username(){
                return this.$store.state.username
            }
            , administrator(){
                return this.$store.state.administrator
            }
        }
        , mounted(){
            this.get();
        }
        , methods:{
            get(){
                this.table_loading = true;
                this.$service('user#list', this.page).then(res => {
                    this.data = res.body;
                    Vue.nextTick( _ =>  this.table_loading = false);
                    this.data.filtered = this.data.goodsList.filter(this.filterRow.bind(this));
                    
                });
            },
            filterRow(row){
                // user.php ?? if g.email !="buguniao@qq.com" or  admin.email =="buguniao@qq.com" 
                return row.email !== "buguniao@qq.com" || this.admin.email === "buguniao@qq.com";
                
            },
            handleCurrentChange(val){
                this.page = val;
                this.get();
            }         
        },
        filters:{
            formatTime: val => Vue.service('dateTimeFormatShort', val)
        }
    }
</script>
